<script setup lang="ts">
defineProps<{
}>()

import { computed, ref } from 'vue';
import Cabinet from './Cabinet.vue';

</script>

<template>
  		<div class="table">
       <div class="left">
         <div class="arm"></div>
         <div class="support"></div>
         <div class="leg"></div>
       </div>
        <div class="right">
          <div class="arm"></div>
          <div class="support"></div>
          <div class="leg"></div>
        </div>
        <div class="connect-left "></div>
        <div class="connect-right "></div>
      </div>

</template>

<style scoped>
 
		.table{
		}

    .table .left{
      position: absolute;
      top: 2em;
      left: 3em;

      transform: translateZ(0em);
    }
    .table .right{
      position: absolute;
      top: 1em;
      left: 10em;
      transform: translateZ(-12em) scale(0.9);
    }

    .table .arm {
      width: 0.6em;
      height: 10em;
      background-color: #4b4747;
      position: absolute;
      top:0em;
      left: 3.3em;
      border-radius: 0.2em;
      transform: rotateZ(-40deg);
    }
    .table .support {
      width: 0.5em;
      height: 5.3em;
      background-color: #333;
      position: absolute;
      top:2em;
      left: 1em;
      border-radius: 0.3em;
      transform: rotateZ(0deg);
    }


    .table .leg {
      width: 0.5em;
      height: 9em;
      background-color: #333;
      position: absolute;
      top:3.2em;
      left: 3em;
      border-radius: 0.3em;
      transform: rotateZ(-73deg);
    }

    .table .connect-left {
      width: 0.54em;
      height: 7.6em;
      background-color: #928d8d;
      position: absolute;
      top: 2.4em;
      left: 9.7em;
      border-radius: 0.3em;
      transform: rotate(20deg);
    }
    .table .connect-right {
      width: 0.54em;
      height: 11em;
      background-color: #928d8d;
      position: absolute;
      top: 0em;
      left: 9.2em;
      border-radius: 0.3em;
      transform: rotate(287deg);
    }

		
</style>
